<template>
    <div>
        <!--        查询文章-->
        <span class="from">
            <el-form :inline="true" :model="heartmark" class="demo-form-inline">
            <el-form-item label="测试标题:">
                <el-input v-model="heartmark.name"></el-input>
            </el-form-item>
                <!--//日期-->
                <!--<el-date-picker
                        v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>-->
                <!--                //搜索日期-->
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        </span>
        <!--                新增文章-->
        <div style="margin-bottom: 30px">
            <el-button type="text" @click="resetData" :style="{'background-color':'#409EFF',color:'#fff',textAlign:'center',width:'100px',padding:'10px 0'}">
                <span>新增测试</span>
            </el-button>
            <!--            新增文章-->
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="试题标题" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="测试简介" :label-width="formLabelWidth">
                        <el-input v-model="form.simplyintroduce" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="题目数量" :label-width="formLabelWidth">
                        <el-input v-model="form.total" autocomplete="off"></el-input>
                    </el-form-item>


                    <el-form-item label="文章图片" :label-width="formLabelWidth">
                        <el-upload :on-success="uploadImg" name="file"
                                   action="http://localhost:8080/HeartmarkController/upload"
                                   list-type="picture-card"
                                   :auto-upload="true">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img
                                        class="el-upload-list__item-thumbnail"
                                        :src="file.url" alt=""
                                >
                                <span class="el-upload-list__item-actions">
  <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
  >
    <i class="el-icon-zoom-in"></i>
  </span>
  <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
  >
    <i class="el-icon-download"></i>
  </span>
  <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
  >
    <i class="el-icon-delete"></i>
  </span>
</span>
                            </div>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible1">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>

                    </el-form-item>

                </el-form><!-------------------------------------------------------------------------------------------------->
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveDate">保 存</el-button>
                </div>
                <!--                ---------------------------------------------------------------------------------->
            </el-dialog>
        </div>
    <!--        文章列表展示-->
    <template>
        <el-table
                :data="tableData"
                border
                style="width: 100%"
                :header-cell-style="{'background-color':'#409EFF',color:'#fff',textAlign:'center'}"
                :cell-style="{'text-align':'center'}">

            <el-table-column
                    prop="id"
                    label="ID">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="测试名称">
            </el-table-column>
            <el-table-column
                    prop="simplyintroduce"
                    label="测试介绍">
            </el-table-column>
            <el-table-column
                    prop="total"
                    label="试题数目">
            </el-table-column>
            <el-table-column
                    prop="picture"
                    label="列表图url">
                <template slot-scope="scope">
                    <img v-if="scope.row.picture.substr(0,5) === 'https' " :src="scope.row.picture" min-width="70" height="70"/>
                    <img v-else :src="'http://localhost:8080/HeartmarkController/down?filename=' + scope.row.picture" min-width="70" height="70"/>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.$index)" type="text" size="small">编辑</el-button>
                    <el-button
                            @click.native.prevent="deleteRow(scope.$index)"
                            type="text"
                            size="small">
                        移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

        <!--        删除操作-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <span>此操作将永久删除该文件是否继续</span>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="deleteData">确 定</el-button>
  </span>
        </el-dialog>
        <!--        分页组件-->
        <div :style="{marginTop:'20px'}">
            <template>
                <div>
                    <el-pagination
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage"
                            :page-size="pageSize"
                            :total="pageCount"
                            @prev-click="getPrePage"
                            @next-click="getNextPage"
                    >
                    </el-pagination>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
    export default {
        name: "HeartmarkComponent",
        data() {
            return {
                //数据库的总条数
                pageCount: 0,
                //分页需要的当前页码
                // pageNum: '1',
                currentPage: 1,
                //分页每页显示的当前条数
                pageSize: 5,
                //搜索所运用的属性
                value1: '',
                heartmark: {
                    name: '',
                    simplyintroduce: ''
                },
                form: {
                    id: '',
                    name: '',
                    simplyintroduce: '',
                    picture: '',
                },
                //上传图片
                dialogImageUrl: '',
                dialogVisible1: false,
                disabled: false,


                tableData: [],
                teachers: [],
                articleType: [],
                dialogFormVisible: false,
                dialogTableVisible: false,
                dialogTableVisible2: false,
                dialogVisible: false,
                formLabelWidth: '120px',
                title: '',
                state: '',
                value: '',
                valueType: ''
            }
        },
        created() {
            this.refresh();
        },
        methods: {
            //查找测试
            onSubmit(){
                this.axios.get("/heartmark/getLikeMark", {
                    params: {
                        markName: this.heartmark.name
                    }
                }).then(res => {
                    this.tableData = res.data.data
                    console.log(res)
                })
            },
            //获取所有文章列表
            // refresh() {
            //     this.axios.get("/HeartmarkController/selectAll").then(res => {
            //         console.log(res);
            //         this.tableData = res.data.data;
            //     })
            // },
            refresh() {
                this.axios.get("/HeartmarkController/selectAllByPage", {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                    }
                }).then(res => {
                    console.log(res.data.data)
                    //获取成功后将数据付给articleData
                    this.tableData = res.data.data.list;
                    this.pageCount = res.data.data.total;
                })
            },
            //图片上传
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible1 = true;
                console.log(file.url)
            },
            handleDownload(file) {
                console.log(file);
            },
            uploadImg(resp){
                console.log(resp)
                this.form.picture = resp.data
            },
            //新增数据刷新
            resetData(){
                this.title = '新增';
                this.state = 1;
                this.dialogFormVisible = true;
                this.form.id = '';
                this.form.name= '';
                this.form.simplyintroduce= '';
                this.form.picture = '';

            },
            //新增数据
            insertData(){
                this.axios.post("/HeartmarkController/add",{
                    name:this.form.name,
                    simplyintroduce:this.form.simplyintroduce,
                    total:this.form.total,
                    picture:this.form.picture,
                }).then(res=>{
                    console.log(res)
                })
            },
            //保存数据
            saveDate(){
                if (this.state === 1){
                    this.insertData();
                    setTimeout(()=>{this.refresh()},500);
                }
                if (this.state === 2){
                    this.updateDate();
                    setTimeout(()=>{this.refresh()},500);
                }
                this.dialogFormVisible = false;

            },
            //修改数据显示
            handleClick(index) {
                this.title = '编辑文章';
                this.state = 2;
                console.log(index);
                this.dialogFormVisible = true;
                console.log(this.tableData);
                this.form.id = this.tableData[index].id;
                this.form.name = this.tableData[index].name;
                this.form.publicitytext = this.tableData[index].publicitytext;
                this.form.createtime = this.tableData[index].createtime;
            },
            //修改数据
            updateDate(){
                this.axios.post("/HeartmarkController/updateById",{
                    id:this.form.id,
                    name:this.form.name,
                    simplyintroduce:this.form.simplyintroduce,
                    picture:this.form.picture,
                }).then(res=>{
                    console.log(this.form.id)
                    console.log(res)
                })
            },
            //删除数据
            deleteRow(index){
                this.dialogVisible = true;
                this.form.id = this.tableData[index].id;
                console.log(this.form.id);
            },
            deleteData(){
                this.dialogVisible = false;
                this.axios.delete("/HeartmarkController/deleteById",{
                    params:{
                        id:this.form.id
                    },
                }).then(res=>{
                    console.log(res)
                    setTimeout(()=>{this.refresh()},500)
                })
            },
            //当点击上一页的时候
            handleCurrentChange(val) {
                this.currentPage=val;
                this.refresh();
            },
            getPrePage(val) {
                this.currentPage=val;
                this.refresh();
            },
            getNextPage(val) {
                this.currentPage=val;
                this.refresh();
            },
        },

    }
</script>

<style scoped>

</style>